<template>
  <el-popover ref="popover" :placement="placement" trigger="click">
    <el-tree
      :data="data"
      :node-key="nodeKey"
      :props="props"
      :highlight-current="true"
      :expand-on-click-node="true"
      :default-expand-all="defaultExpandAll"
      @current-change="currentChangeHandle"
    ></el-tree>
    <template #reference>
      <el-input
        :value="prop"
        :readonly="true"
        :placeholder="placeholder"
        style="cursor: pointer"
      ></el-input>
    </template>
  </el-popover>
</template>
<script setup lang="ts">
defineProps({
  data: {
    type: Array,
    default: [],
  },
  placement: {
    type: String,
    default: "right-start",
  },
  nodeKey: {
    type: String,
    default: "",
  },
  props: {
    type: Object,
    default: {
      label: "name",
      children: "children",
    },
  },
  prop: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "点击选择内容",
  },
  defaultExpandAll: {
    type: Boolean,
    default: false,
  },
});

const $emit = defineEmits(["handleCurrentChange"]);
//当前选中节点变化时触发的事件
const currentChangeHandle = (data: Object) => {
  $emit("handleCurrentChange", data);
};
</script>
<style lang="scss" scoped></style>
